import React, { useState } from 'react';
import { Head } from 'ice';
import { Button, Card, Dialog, Grid, Icon, Input, Pagination, ResponsiveGrid, Table } from '@alifd/next';
import { useFusionTable } from 'ahooks';
import PageHeader from '@/components/PageHeader';
import logService from '@/services/log';
import styles from './index.module.scss';

const TableActionIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1899388_oxn3zhg34oj.js',
});

const Log = () => {
  const [size, setSize] = useState('medium');
  const [isZebra, setIsZebra] = useState(false);
  const [visible, setVisible] = useState(false);
  const [details, setDetails] = useState({});
  const { tableProps, paginationProps, search } = useFusionTable(logService.list, {
    defaultPageSize: 10,
    cacheKey: 'tableProps',
    formatResult: (response) => {
      return {
        list: response.page.list,
        total: response.page.totalCount,
      };
    },
  });

  const { reset } = search;

  const seeCell = (...args) => {
    const record = args[2];
    return (
      <Button
        text
        onClick={() => {
          setVisible(true);
          setDetails(record);
        }}
      >
        <Icon type="eye" />
      </Button>
    );
  };

  return (
    <ResponsiveGrid gap={20}>
      <Head>
        <title>系统日志</title>
      </Head>
      <ResponsiveGrid.Cell colSpan={12}>
        <PageHeader breadcrumbs={[{ name: '系统管理' }, { name: '系统日志' }]} />
      </ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell colSpan={12}>
        <Card free>
          <Card.Content>
            <div className={styles.search}>
              <div className={styles.left}>
                <Input placeholder="用户名/用户操作" />
                <Button type="normal">查询</Button>
              </div>
              <div className={styles.right}>
                <Button text onClick={() => setSize(size === 'medium' ? 'small' : 'medium')}>
                  <TableActionIcon type="narrow" size="small" />
                </Button>
                <Button text onClick={() => setIsZebra(!isZebra)}>
                  <TableActionIcon type="zebra" size="small" />
                </Button>
              </div>
            </div>
            <Table className={styles.table} {...tableProps} size={size} isZebra={isZebra}>
              <Table.Column title="ID" dataIndex="id" width={80} />
              <Table.Column title="用户名" dataIndex="username" />
              <Table.Column title="用户操作" dataIndex="operation" />
              <Table.Column title="请求方法" dataIndex="method" width={180} />
              <Table.Column title="请求参数" dataIndex="params" width={180} />
              <Table.Column title="执行时长" dataIndex="time" width={100} />
              <Table.Column title="IP地址" dataIndex="ip" width={145} />
              <Table.Column title="创建时间" dataIndex="createDate" width={160} />
              <Table.Column width={50} align="center" cell={seeCell} />
            </Table>
            <Pagination style={{ marginTop: '1rem' }} {...paginationProps} />
          </Card.Content>
        </Card>
      </ResponsiveGrid.Cell>
      <Dialog
        title="详情"
        visible={visible}
        footer={false}
        closeMode={['close', 'esc', 'mask']}
        onClose={() => setVisible(false)}
      >
        <div className={styles.dialog}>
          <Grid.Row gutter={16}>
            <Grid.Col span="6">ID</Grid.Col>
            <Grid.Col span="18">{details.id}</Grid.Col>
          </Grid.Row>
          <Grid.Row gutter={16}>
            <Grid.Col span="6">用户名</Grid.Col>
            <Grid.Col span="18">{details.username}</Grid.Col>
          </Grid.Row>
          <Grid.Row gutter={16}>
            <Grid.Col span="6">用户操作</Grid.Col>
            <Grid.Col span="18">{details.operation}</Grid.Col>
          </Grid.Row>
          <Grid.Row gutter={16}>
            <Grid.Col span="6">请求方法</Grid.Col>
            <Grid.Col span="18">{details.method}</Grid.Col>
          </Grid.Row>
          <Grid.Row gutter={16}>
            <Grid.Col span="6">请求参数</Grid.Col>
            <Grid.Col span="18">{details.params}</Grid.Col>
          </Grid.Row>
          <Grid.Row gutter={16}>
            <Grid.Col span="6">执行时长</Grid.Col>
            <Grid.Col span="18">{details.time} 毫秒</Grid.Col>
          </Grid.Row>
          <Grid.Row gutter={16}>
            <Grid.Col span="6">IP地址</Grid.Col>
            <Grid.Col span="18">{details.ip}</Grid.Col>
          </Grid.Row>
          <Grid.Row gutter={16}>
            <Grid.Col span="6">创建时间</Grid.Col>
            <Grid.Col span="18">{details.createDate}</Grid.Col>
          </Grid.Row>
        </div>
      </Dialog>
    </ResponsiveGrid>
  );
};

export default Log;
